<template>
	<div class="u-page u-page-color-other">
		<!-- <navbar class="header" :background="backgroundColor" :title="title" @onBack="goBack"></navbar> -->
		<u-navbar :is-back="false" :title="title" :background="background" :border-bottom="false" :title-bold="true" title-color="#040503"></u-navbar>
		<div class="u-page-color">
			<div class="u-page u-box">
				<!-- 用户信息 -->
				<div class="u-flex space-between u-cl-white u-mt-10">
					<div class="u-flex">
						<div class="u-mr-10">
							<u-avatar :src="UserInfo.avatarUrl" size="120"></u-avatar>
						</div>
						<div class="u-flex-1 u-pl-5 color-black">
							<div class="u-flex">
								<div class="u-title u-pointer">
									{{UserInfo.nickName}}
								</div>
							</div>
							<div class="fw-545" @click="copyBtn(UserInfo.userId)">ID：{{UserInfo.userId}}<span class="u-pl-5" @click="copyBtn(UserInfo.userId)">复制</span></div>
						</div>
					</div>
					<div @click="editUserInfo">
						<u-icon name="setting" color="#000000" size="45"></u-icon>
					</div>
				</div>
			</div>
			
			<div class="u-flex u-pt-40">
				<div style="display: flex;flex-direction: column;justify-content: center;width: 50%;text-align: center;" @click="$u.route('/pages_tabbar_contact/personal_contact/WorkToDo')">
					<div class="u-title u-fz-30">
						{{todoNum?todoNum:0}}
					</div>
					<div style="font-size: 30rpx;">
						工作待办
					</div>
				</div>
				<div style="display: flex;flex-direction: column;justify-content: center;width: 50%;text-align: center;" @click="$u.route('/pages_tabbar_contact/personal_contact/SolitaireList?SceneAssetsId='+SceneAssetsId)">
					<div class="u-title u-fz-30">
						{{solitaireNum?solitaireNum:0}}
					</div>
					<div style="font-size: 30rpx;">
						品牌代理
					</div>
				</div>
			</div>
			
			<!-- <div class="u-pt-20">
				<div style="width: 95%;margin: 0 auto;" @click="notOpenTips">
					<u-image width="100%" height="120rpx" mode="aspectFit" border-radius="10" :src="CertifiedPartnerURL"></u-image>
				</div>
			</div> -->
			<div class="u-pt-20">
				<div class="provider-item">
					<div style="width: 17%;"></div>
					<div class="provider-item-center">
						<div>
							<div class="provider-center-title u-fz-15 u-font-bold">
								<span v-if="Provider.providerId">区域服务商 NO.{{Provider.providerId}}</span>
								<span v-else>招募区域服务商</span>
							</div>
							<div class="u-fz-11 u-pt-5" style="color: #d6d6d6;" v-if="Provider.providerId">
								<span>{{Provider.area}}</span>
							</div>
							
							<div class="u-fz-9 u-pt-5" style="color: #d6d6d6;" v-else>
								<span>可获得工作报酬、团购返利、区域奖励等最大化收益。</span>
							</div>
							
						</div>
					</div>
					<div class="provider-item-right">
						<div class="provider-item-right-btn">
							<span @click="toEvaluatorInfo" v-if="Provider.providerId">查看资料</span>
							<span @click="applyServiceProviderShow" v-else>立即申请</span>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="u-mt-25">
			<div style="width: 90%;margin: 0 auto;">
				<div style="display: flex;justify-content: space-between;height: 100rpx;" @click="$u.route('pages_tabbar_contact/personal_contact/MyMessages')">
					<div class="u-flex">
						<div>
							<u-image width="60rpx" height="45rpx" mode="aspectFit" border-radius="20" :src="messCenterURL"></u-image>
						</div>
						<div class="u-fz-16 u-font-bold u-pl-5">
							消息中心
						</div>
					</div>
					<div class="u-flex">
						<u-icon name="arrow-right" size="30"></u-icon>
					</div>
				</div>
			</div>
			<div class="u-border-top" style="width: 88%;margin: 0 auto;"></div>
			<div style="width: 90%;margin: 0 auto;">
				<div style="display: flex;justify-content: space-between;height: 100rpx;" @click="$u.route('pages_private_scene2/GroupPurchase/OrderList')">
					<div class="u-flex">
						<div>
							<u-image width="60rpx" height="45rpx" mode="aspectFit" border-radius="20" :src="myOrdersURL"></u-image>
						</div>
						<div class="u-fz-16 u-font-bold u-pl-5" style="line-height: 10rpx;">
							我的订单
						</div>
					</div>
					<div class="u-flex">
						<u-icon name="arrow-right" size="30"></u-icon>
					</div>
				</div>
			</div>
			<div class="u-border-top" style="width: 88%;margin: 0 auto;"></div>
			<div style="width: 90%;margin: 0 auto;">
				<div style="display: flex;justify-content: space-between;height: 100rpx;" @click="$u.route('pages_tabbar_contact/personal_contact/MyEvaluations')">
					<div class="u-flex">
						<div>
							<u-image width="60rpx" height="45rpx" mode="aspectFit" border-radius="20" :src="myEvaluationURL"></u-image>
						</div>
						<div class="u-fz-16 u-font-bold u-pl-5" style="line-height: 10rpx;">
							品牌测评
						</div>
					</div>
					<div class="u-flex">
						<u-icon name="arrow-right" size="30"></u-icon>
					</div>
				</div>
			</div>
			<div class="u-border-top" style="width: 88%;margin: 0 auto;">
				<div style="display: flex;justify-content: space-between;height: 100rpx;" @click="$u.route('pages_tabbar_contact/personal_contact/EvaluatorInfo')">
					<div class="u-flex">
						<div>
							<u-image width="60rpx" height="45rpx" mode="aspectFit" border-radius="20" :src="personalInfoURL"></u-image>
						</div>
						<div class="u-fz-16 u-font-bold u-pl-5">
							个人资料
						</div>
					</div>
					<div class="u-flex">
						<u-icon name="arrow-right" size="30"></u-icon>
					</div>
				</div>
			</div>
			
			<div class="u-border-top" style="width: 88%;margin: 0 auto;" v-if="Authority.canStartBusiness"></div>
			<div style="width: 90%;margin: 0 auto;" v-if="Authority.canStartBusiness">
				<div style="display: flex;justify-content: space-between;height: 100rpx;" @click="$u.route('pages_tabbar_contact/personal_contact/ProvideSamplesList')">
					<div class="u-flex">
						<div>
							<u-image width="60rpx" height="45rpx" mode="aspectFit" border-radius="20" :src="provideSamplesListURL"></u-image>
						</div>
						<div class="u-fz-16 u-font-bold u-pl-5">
							样品发放
						</div>
					</div>
					<div class="u-flex">
						<u-icon name="arrow-right" size="30"></u-icon>
					</div>
				</div>
			</div>
			
			<div class="u-border-top" style="width: 88%;margin: 0 auto;" v-if="Authority.canStartBusiness"></div>
			<div style="width: 90%;margin: 0 auto;" v-if="Authority.canStartBusiness">
				<div style="display: flex;justify-content: space-between;height: 100rpx;" @click="$u.route('pages_tabbar_contact/personal_contact/StartBusiness')">
					<div class="u-flex">
						<div>
							<u-image width="60rpx" height="45rpx" mode="aspectFit" border-radius="20" :src="startBusinessURL"></u-image>
						</div>
						<div class="u-fz-16 u-font-bold u-pl-5">
							发起业务
						</div>
					</div>
					<div class="u-flex">
						<u-icon name="arrow-right" size="30"></u-icon>
					</div>
				</div>
			</div>
			<div class="u-border-top" style="width: 88%;margin: 0 auto;" v-if="isNewSeaSpace"></div>
			<div style="width: 90%;margin: 0 auto;" v-if="isNewSeaSpace">
				<div style="display: flex;justify-content: space-between;height: 100rpx;" @click="$u.route('/pages_private_scene1/NewSeaSpace/Index')">
					<div class="u-flex">
						<div>
							<u-image width="60rpx" height="45rpx" mode="aspectFit" border-radius="20" :src="startBusinessURL"></u-image>
						</div>
						<div class="u-fz-16 u-font-bold u-pl-5">
							海上新空间
						</div>
					</div>
					<div class="u-flex">
						<u-icon name="arrow-right" size="30"></u-icon>
					</div>
				</div>
			</div>
		</div>
		
		<!-- <div style="bottom: 30rpx;position: fixed;width: 100%;">
			<div class="u-pt-10" style="width: 95%;margin: 0 auto;">
				<u-image width="100%" height="200rpx" border-radius="20" :src="PersonalBottomAds[0].image" @click="routeAD(PersonalBottomAds[0].link,PersonalBottomAds[0].source)"></u-image>
			</div>
		</div> -->
		
		<!-- 完善用户信息：昵称和头像 -->
		<div>
			<u-modal
			  ref="uModal"
			  :show-title="false"
			  v-model="ShowEditUserInfo"
			  :mask-close-able="true"
			  :show-confirm-button="false"
			>
				<div class="u-page u-general-color">
					<div class="u-center user-head-bg" style="padding-top: 130rpx;">
						<button class="aui-flex-user" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
							<img :src="temp_avatarUrl" alt="">
							<span class="aui-flex-vip">
								<u-icon name="camera-fill" color="#e55e97" size="40"></u-icon>
							</span>
						</button>
					</div>
					<div class="u-mt-20 u-ml-20 u-mr-20" style="border-radius: 15rpx;">
						<div class="u-flex" style="padding: 15rpx 20rpx;background: #fff;">
							<div class="u-pr-5 u-fz-15" style="color: #868585;">昵称</div>
							<div style="width: 85%;">
								<u-input v-model="temp_nickName" type="nickname" :custom-style="inputStyle" />
							</div>
						</div>
					</div>
					<div class="u-mt-30 u-pl-20 u-pr-20">
						<div style="display: flex;justify-content: space-between;">
							<div class="" style="width: 100rpx;height: 100rpx;border-radius: 10rpx;">
								<div style="line-height: 0rpx;padding-top: 27rpx;padding-left: 27rpx;">
									<u-icon name="weixin-fill" color="#4dc822" size="50"></u-icon>
								</div>
							</div>
							<div style="width: 78%;font-size: 24rpx;">
								为保障您在平台能够顺利参与工作，赚取劳动报酬，我们建议您使用与当前微信一致的头像和昵称！
							</div>
						</div>
					</div>
					<div class="u-pt-30 u-pb-20 u-pl-20 u-pr-20">
						<u-button type="primary" :custom-style="customStyle" @click="ConfirmEditUserInfo">确定使用</u-button>
					</div>
				</div>
			</u-modal>
		</div>
		
		<!-- 申请区域服务商弹窗 -->
		<u-modal v-model="ApplyServiceProvider_show" confirm-text="已知晓" @confirm="toApplyServiceProvider" title="区域服务商申请和权益说明" confirm-color="#e55e97" :mask-close-able="true">
			<div class="slot-content2">
				<scroll-view scroll-y="true" style="height: 800rpx;">
					<div class="u-title">· 资格申请及收益：</div>
					<p>1、所有用户自动赋予线上服务商资格。</p>
					<p>2、用户须提交申请，方可获得区域服务商资格。</p>
					<p>3、按照“省-市-县区-街道-社区”的5级分类，确定区域归属。</p>
					<p>4、区域服务商可获得工作报酬，团购返利，区域奖励等最大化收益。</p>
					<div class="u-title u-pt-5">· 玫丽责任及义务：</div>
					<p>5、玫丽提供优质品牌方的推广、销售、服务等工作机会。</p>
					<p>6、工作机会创造的工作价值，将按照区域归属和业绩占比等条件，自动分配。</p>
					<div class="u-title u-pt-5">· 区域服务商责任及义务：</div>
					<p>7、积极参与平台发布的工作机会，传播及引导区域内的用户参与，共同创造工作价值。</p>
					<div class="u-title u-pt-5">· 区域服务商资格取消及升级：</div>
					<p>8、区域服务商，每申请一次，授权期限为6个月。逾期后，需重新申请。</p>
					<p>9、区域服务商可申请成为“街道”级别的唯一服务商，详情请联系客服。</p>
					<p>10、区域服务商可申请成为“县区级”级别的业务合伙人，详情请联系客服。</p>
					<p>11、已有“县区级”业务合伙人的区域，不再设立“街道”唯一服务商。</p>
					<p>12、“街道”唯一服务商和“县区级”业务合伙人，需达到相应工作指标。不达标者，平台取消授权。</p>
				</scroll-view>
			</div>
		</u-modal>

	</div>
</template>

<script>
import globalData from "@/globalData";
import COS from "@/common/js/cos-wx-sdk-v5.min.js";
import navbar from "../components/navbar.vue"

export default {
  components:{
  	  navbar
  },

  data() {
    return {
	  SceneAssetsId: '',
	  UserInfo: {},
	  url: globalData.inviteURL,
	  levelURL: globalData.iconURL + "PersonalIndex/LevelIcon.png",
	  IntegralURL: globalData.iconURL + "PersonalIndex/Integral.png",
	  CertifiedPartnerURL: globalData.ICON.personalIndex5,
	  personalInfoURL: globalData.ICON.personalIndex2,//个人资料图标
	  myEvaluationURL: globalData.ICON.personalIndex3,//我的测评图标
	  startBusinessURL: globalData.ICON.personalIndex4,//发起业务图标
	  messCenterURL: globalData.ICON.personalIndex6,//消息中心图标
	  myOrdersURL: globalData.ICON.personalIndex7,//我的订单图标
	  inviteURL: globalData.inviteURL,
	  provideSamplesListURL: globalData.ICON.personalIndex7,// 样品发放图标
	  backgroundColor: 'linear-gradient(to right , rgb(244,227,233), rgb(246,230,236))',
	  title: '我的',
	  background: {
	  	backgroundImage: 'linear-gradient(to right , rgb(244,227,233), rgb(246,230,236))'
	  },
	  ShowEditUserInfo: false,//弹窗修改用户信息标志
	  temp_nickName: '',//弹窗修改用户头像和昵称的临时昵称
	  temp_avatarUrl: '',//弹窗修改用户头像和昵称的临时头像
	  todoNum: 0,//我的待办
	  solitaireNum: 0,//我的接龙
	  delAvatarUrl: [],//确定更改头像之后需要删除的头像列表
	  PersonalBottomAds: [],//底部广告图
	  Authority: {
		  canStartBusiness: false//是否可以发起业务
	  },
	  customStyle: {
	  	background: '#e55e97 !important'
	  },
	  inputStyle: {
		  background: "#fff"
	  },
	  ApplyServiceProvider_show: false,//申请区域服务商弹窗
	  Provider: {},//区域服务商信息
	  isNewSeaSpace: false//是否海上新空间会员
    };
  },

  onLoad() {
    //未登录跳转到登录页面
    var loginRes = this.checkLogin();
    if (loginRes) {
      this.UserInfo = uni.getStorageSync('userInfo')
	  this.getNums()
	  this.getAds()
	  this.canStartBusiness()
    }
  },

  onShow(){
	  this.getProviderInfo()
	  this.NewSeaSpace()
  },

  onPullDownRefresh() {
	this.getNums()
	// 停止Loading
	setTimeout(() => {
		// 停止Loading
		uni.stopPullDownRefresh();
	}, 1500)
  },

  methods: {
	  
	/**
	 * 获取广告图
	 */
	async getAds() {
		let result = await this.$u.api.unifyMiniRest({
			systemid: "meily",
			url: "/config/list",
			configType: "personal"
		});
		if(result.code == 200){
			let rows = result.rows
			if(rows.length > 0){
				for(const i in rows){
					if(rows[i].configKey == 'personal-bottom'){
						let obj = {image: rows[i].imageLink.split(",")[0],link: rows[i].configLink,source: rows[i].configFrom}
						this.PersonalBottomAds.push(obj)
					}
				}
			}
		}
	},
	
	/** 
	 * 获取是否能发起业务的权限
	 */
	async canStartBusiness() {
		let result = await this.$u.api.unifyMiniRestGet({
			systemid: "meily",
			url: "/role/query/start-business/"+this.UserInfo.userId,
		    loading: false // 默认发起请求会有一个全局的Loading，设置false可去掉
		});
		if(result.code == 200){
			this.Authority.canStartBusiness = result.data
		}
	},
	  
	/** 
	 * 获取我的待办和我的接龙
	 */
	async getNums() {
		let result = await this.$u.api.unifyMiniRest({
			systemid: "meily",
			url: "/minrest",
			appid: 'meily',
			wf_num: 'R_meily_BL004',
			userId: this.UserInfo.userId,
			nickName: this.UserInfo.nickName,
		    loading: false // 默认发起请求会有一个全局的Loading，设置false可去掉
		});
		if(result.code == 200){
			this.todoNum = result.data.ToDoNum
			this.solitaireNum = result.data.GroupPurchaseNum
		}
	},

	//点击一键复制
	copyBtn (text) {
		wx.setClipboardData({
		  //准备复制的数据内容
		  data: text,
		  success: function (res) {
			wx.showToast({
			  title: '已复制',
			});
		  }
		});
	},
	
	/** 
	 * 此功能暂未开放
	 */
	notOpenTips() {
		this.$u.toast("此功能暂未开放")
	},
	
	/** 
	 * 弹出修改用户昵称和头像弹窗
	 */
	editUserInfo() {
		this.temp_avatarUrl = this.UserInfo.avatarUrl
		this.temp_nickName = this.UserInfo.nickName
		this.ShowEditUserInfo = true
	},
	
	/**
	 * 头像上传
	 */
	onChooseAvatar(e){
		let _this = this
		// SECRETID 和 SECRETKEY请登录 https://console.cloud.tencent.com/cam/capi 进行查看和管理
		const Cos = new COS({
			SecretId: globalData.CosSecretId,
			SecretKey: globalData.CosSecretKey,
		});
		//解析原头像地址的随机值，重新生成随机值的时候排除原地址随机值，避免地址相同导致虽然图片已经上传但前端检测不到地址变化不更新头像
		// let ramdom_sault = _this.getRamdomSault(_this.temp_avatarUrl,_this.UserInfo.avatarUrl)
		let folderName = "perpartner/UserAvatar/";
		let upload_fileName = _this.UserInfo.userId + '_' + _this.guid() + '.png'
		Cos.postObject({
		    Bucket: globalData.CosBucket,
		    Region: globalData.CosRegion,
		    Key: folderName + upload_fileName,// 文件夹+文件名称
		    FilePath: e.detail.avatarUrl,
		    onProgress: function (info) {
		        console.log(JSON.stringify(info));
		    }
		}, function (err, data) {
		    console.log(err || data);
			if(data){
				// data.Location返回的路径，会转成%之类的，导致不能直接访问，所以路径需要自己拼
				// let backUrl = "https://" + data.Location;
				let backUrl = "https://" + globalData.CosBucket + ".cos."+ globalData.CosRegion + ".myqcloud.com/" + folderName + upload_fileName;
				_this.temp_avatarUrl = backUrl
				//删除cos存的原来的头像
				// let cos_key = _this.getKeyByAvatar(_this.UserInfo.avatarUrl)
				// Cos.deleteObject({
				//     Bucket: globalData.CosBucket,
				//     Region: globalData.CosRegion,
				//     Key: cos_key,  // 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段
				// }, function(err2, data2) {
				//     console.log(err2 || data2);
				// 	if(data2) {
				// 		_this.showMSG("none","删除原头像成功")
				// 	}else {
				// 		_this.showMSG("none","删除原头像失败")
				// 	}
				// });
			}else{
				_this.showMSG('none','头像上传失败，请重新上传')
			}
		});
	},
	
	/**
	 * 确定完善用户信息
	 */
	async ConfirmEditUserInfo(){
		let _this = this
		if(_this.isNotNull(_this.temp_nickName) && _this.isNotNull(_this.temp_avatarUrl)){
			_this.ShowEditUserInfo = false
			//请求修改用户头像和昵称的接口
			let result = await _this.$u.api.unifyMiniRestGet({
				systemid: "sso", //必须，系统名称，这里不同的系统对接请求地址的域名前串不同，各请求地址统一写在一个全局配置文件中
				url: "/system/user/profile/"+_this.UserInfo.userId+"/meily", //必须，接口请求地址
				loading: true
			});
			if(result.code == 200) {
				let user_info = result.data
				if(_this.isNotNull(user_info.unid)) {
					let res2 = await _this.$u.api.unifyMiniRest({
						systemid: "sso", //必须，系统名称，这里不同的系统对接请求地址的域名前串不同，各请求地址统一写在一个全局配置文件中
						url: "/system/user/profile/update" ,//必须，接口请求地址
						appletId: "meily",
						userid: this.UserInfo.userId,
						unionid: this.UserInfo.unionid,
						unid: user_info.unid,
						nickname: _this.temp_nickName,
						avatar: _this.temp_avatarUrl,
						loading: true
					});
					if(res2.code == 200) {//更新成功，将新的用户信息set进缓存
						_this.UserInfo.nickName = _this.temp_nickName
						_this.UserInfo.avatarUrl = _this.temp_avatarUrl
						_this.SET_USER_INFO(_this.UserInfo)
						_this.showMSG('success','保存成功')
					}else {
						_this.showMSG('error','出错啦')
					}
				}else {
					_this.showMSG('error','出错啦')
				}
			}else {
				_this.showMSG('error','出错啦')
			}
		}else{
			_this.showMSG('none','须上传头像和填写昵称才能修改噢')
		}
		
	},
	
	/**
	 * 解析原头像地址的随机值，重新生成随机值的时候排除原地址随机值，避免地址相同
	 */
	getRamdomSault(avatar_url,original_url){
		let sault = 0
		let original_sault = ''
		if(this.isNotNull(original_url)) {
			let original_flag = original_url.substring(original_url.indexOf('.png')-2,original_url.indexOf('.png')-1)
			if(original_flag == "_") original_sault = original_url.substring(original_url.indexOf('.png')-1,original_url.indexOf('.png'))
		}
		if(this.isNotNull(avatar_url)){
			//查找.png前两个字符是否为"_"
			let flag = avatar_url.substring(avatar_url.indexOf('.png')-2,avatar_url.indexOf('.png')-1)
			if(flag == "_"){
				sault = avatar_url.substring(avatar_url.indexOf('.png')-1,avatar_url.indexOf('.png'))
				if(sault == 0){
					if(original_sault != '' && original_sault == 1){
						sault = 2
					}else{
						sault = 1
					}
				}else if(sault == 1){
					if(original_sault != '' && original_sault == 0){
						sault = 2
					}else{
						sault = 0
					}
				}else if(sault == 2){
					if(original_sault != '' && original_sault == 0){
						sault = 1
					}else{
						sault = 0
					}
				}
			}
		}
		return sault
	},
	
	/** 
	 * 根据头像地址获取cos的key
	 */
	getKeyByAvatar(avatar_url) {
		return avatar_url.substring(avatar_url.indexOf('perpartner'),avatar_url.length-1)
	},
	
	/** 
	 * 获取区域服务商信息：用于判断当前用户是否已经申请成为了区域服务商
	 */
	async getProviderInfo() {
		let result = await this.$u.api.unifyMiniRest({
			systemid: "meily",
			url: "/provider/info",
			userId: this.UserInfo.userId,
		    loading: false // 默认发起请求会有一个全局的Loading，设置false可去掉
		});
		if(result.code == 200){
			this.Provider = result.data
		}
	},
	
	/** 
	 * 申请区域服务商弹窗
	 */
	async applyServiceProviderShow() {
		//校验是否已经注册过了
		let result = await this.$u.api.unifyMiniRest({
			systemid: "meily",
			url: "/provider/info",
			userId: this.UserInfo.userId,
		    loading: false // 默认发起请求会有一个全局的Loading，设置false可去掉
		});
		if(result.code == 200 && this.isNotNull(result.data)){
			this.Provider = result.data
		}else{
			this.ApplyServiceProvider_show = true
		}
	},
	
	/** 
	 * 跳转到申请区域服务商页面
	 */
	toApplyServiceProvider() {
		this.$u.route('/pages_tabbar_contact/personal_contact/VPSRegister')
	},
	
	/** 
	 * 跳转到个人资料
	 */
	toEvaluatorInfo(){
		this.$u.route('/pages_tabbar_contact/personal_contact/EvaluatorInfo')
	},
	
	
	/**
	 * 判断当前用户是否为海上新空间会员
	 */
	async NewSeaSpace() {
		let result = await this.$u.api.unifyMiniRest({
			systemid: "meily",
			url: "/space/accept/checkUser",
			userId: uni.getStorageSync('userInfo').userId,
			loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
		});
		if (result.code == 200) {
			this.isNewSeaSpace = true
		}
	},

  },
};
</script>

<style scoped>
*{margin: 0;padding: 0;border: 0;list-style: none;text-decoration: none;color: inherit;font-weight: normal;font-family: "微软雅黑";box-sizing: border-box;font-style: normal;}
.body{width: 100%;overflow-x: hidden;background: url(https://7072-prodcloud-0goj9rn820c29ef9-1305572243.tcb.qcloud.la/icon/PersonalIndex/bg.jpg?sign=0774ff2496394fe1546f35ebf013bde8&t=1642562104) top center no-repeat #FFFFFF;background-size: 100%;}
img{vertical-align: middle;max-width: 100%;}
a:hover,a:active,a:visited,a:link,a:focus{-webkit-tap-highlight-color: transparent;outline:none;text-decoration: none;
}
.bg-blue{background: #0068ff;}
.text-blue{color: #289ef4!important;}
.text-yellow{color: #ffa33e!important;}
.btn{color: #FFFFFF;height: 80rpx;line-height: 80rpx;text-align: center;font-size: 30rpx;border-radius: 5rpx;outline: none;}
.wfull{width: 100%;}
.top-title{position: absolute;top: 20rpx;left: 0;width: 100%;font-size: 38rpx;color: #FFFFFF;text-align: center;}

.line-progress{
	width: 440rpx;
}

.color-white{
	color: #FFFFFF;
}

.icon-line{
	display: flex;
	justify-content: space-between;
}

.space-between{
	justify-content: space-between;
}

.code{
	width: 175rpx;
	overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}

.bg-white{
	background-color: #FFFFFF;
}

.mess-item{
	display: flex;
	flex-direction: column;
	width: 148rpx;
	text-align: center;
	font-size: 32rpx;
	/* font-weight: 550; */
}

/* 竖线 */
.x-sidebar-left{
	line-height: 150rpx;
	height: 50rpx;
	border-left: 4rpx solid #e6e5e5;
}

/* 长竖线 */
.x-sidebar-long{
	line-height: 200rpx;
	height: 90rpx;
	border-left: 4rpx solid #e6e5e5;
	margin: 20rpx 10rpx 0 20rpx;
}

.mess-item-text{
	color: rgb(153,153,153);
}

.sign-in-right{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 150rpx;
	height: 100rpx;
	line-height: 50rpx;
	font-size: 26rpx;
	padding-top: 5rpx;
	color: rgb(153,153,153);
}

.flex-center{
	display: flex;
	align-items: center;
}

.sign-in-right-B{
	font-size: 38rpx;
	color: #000000;
}

.color-yellow{
	color: rgb(255,191,68);
}

.border-bottom{
	border-bottom: 1rpx #e5e5e5 solid;
}

.task-center-item{
	height: 150rpx;
	line-height: 50rpx;
	/* width: 95%; */
	margin: 0 auto;
}

.task-center-item-top{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: 30rpx;
	padding-right: 30rpx;
	height: 130rpx;
	border-bottom: 1rpx #e5e5e5 solid;
}

.task-center-item-top-L{
	font-size: 35rpx;
	font-weight: bold;
}

.task-center-item-top-R{
	font-size: 32rpx;
	color: rgb(153,153,153);
}

.task-center-item-T{
	font-size: 32rpx;
	padding-top: 10rpx;
}

.task-center-item-B{
	font-size: 24rpx;
	color: #bcbcbc;
	width: 500rpx;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}

.task-center-item-btn{
	width: 140rpx;
	height: 45rpx;
	line-height: 45rpx;
	border-radius: 30rpx;
	color: rgb(196,133,46);
	background-color: #FFFFFF;
}

.u-box {
    padding: 20rpx 30rpx 0 30rpx;
}

.u-page{
	padding-bottom: 0rpx !important;
}

.u-flex-column{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.create-center-item-top{
	padding-left: 30rpx;
	padding-right: 30rpx;
	height: 130rpx;
	line-height: 130rpx;
	font-size: 35rpx;
	font-weight: bold;
	border-bottom: 1rpx #e5e5e5 solid;
}

.create-center-item{
	display: flex;
	flex-wrap: wrap;
}

.module-box {
    font-size: 32rpx;
	width: 375rpx;
    height: 150rpx;
    /* line-height: 150rpx; */
	text-align: center;
    /* border-top: 3rpx #f7f4f4 solid; */
    border-bottom: 1rpx #e5e5e5 solid;
	border-left: 1rpx #e5e5e5 solid;
	display: flex;
	align-items: center;
	justify-content: center;
	/* border-right: 3rpx #e5e5e5 solid; */
}

.gray-line {
    border-top: 1rpx #e5e5e5 solid;
    border-bottom: 1rpx #e5e5e5 solid;
}

.color-black {
	color: #000000;
}

.fw-545 {
	font-weight: 545;
}

/* 完善用户头像和昵称 */
.aui-flex-user {
	width: 140rpx;
	height: 140rpx;
	margin-right: 15px;
	position: relative;
	border: 0;
	border: none;
	outline: none;
	margin: 0;
	padding: 0;
	overflow: visible;
	border-radius: 100%;
	padding-left: 0;
	padding-right: 0;
	line-height: 0;
}

.aui-flex-user::after {
	border: none;
}

.aui-flex-vip {
	width: 50rpx;
	height: 50rpx;
	display: block;
	position: absolute;
	right: -8rpx;
	top: 100rpx;
}

.aui-flex-user img {
	width: 140rpx;
	height: 140rpx;
	display: block;
	border: 1px solid #fff;
	border-radius: 100%;
}

.aui-flex-gradual {
	background-image: -webkit-gradient(linear,left top,right top,from(#fe941f),to(#ffbf56));
	background-image: -webkit-linear-gradient(left,#fe941f,#ffbf56);
	background-image: -moz-linear-gradient(left,#fe941f,#ffbf56);
	background-image: linear-gradient(to right,#fe941f,#ffbf56);
	background-color: #ffbf56;
	padding: 40px 15px;
}

.aui-flex-vip img {
	width: 100%;
	height: auto;
	display: block;
	border: none;
	border-radius: 0;
}

.user-head-bg {
	background: url("/static/images/improveinfo.png") no-repeat left top / 100%;
}
/* 完善用户头像和昵称end */

.slot-content2 {
	font-size: 28rpx;
	text-align: left;
	width: 93%;
	margin: 0 auto;
	padding-top: 20rpx;
	padding-bottom: 20rpx;
}

/* 区域服务商 */
.provider-item {
	width: 95%;
	height: 110rpx;
	margin: 0 auto;
	background-image: url(https://dev-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/icon/personalIndex5.png);background-size: 100% 100%;
	display: flex;
}

.provider-item-center {
	width: 60%;
	height: 100%;
	display: flex;
	align-items: center;
}

.provider-center-title {
	width: 400rpx;
	color: #ffffff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.provider-item-right {
	width: 23%;
	height: 100%;
	display: flex;
	align-items: center;
}

.provider-item-right-btn {
	background-color: #ffffff;
	color:rgb(34, 31, 73);
	padding: 5rpx 10rpx;
	border-radius: 10rpx;
}

</style>
